import * as zrender from 'zrender/dist/zrender.js'

export const getGroup = function () {
  return new zrender.Group()
}

export const componentUser = function (data = {}) {
  /**
   * 1. 创建一个容器组
   * 2. 创建一个圆角矩形
   * 3. 创建一个圆
   * 4. 创建一行文字
   */
  const width = 64
  const height = 192
  const x = data.x || 0
  const y = data.y || 0
  const text = data.text || '用户01'
  const zlevel = data.zlevel || 0
  // 创建一个圆角矩形
  const rectNode = getRect({width, height: height - 10, x, y: y + 10, zlevel})
  // 创建一个圆
  const circleNode = getCircle({width, height, x: x + (width / 2), y: y + 16, zlevel})
  // 创建一行文字
  const textNode = getText({width, height, text: text, x: x + (width / 2), y: y + (height - 32), zlevel})
  // 创建一个容器组
  const group = new zrender.Group()
  // 设置容器宽高
  group.attr('shape', {width, height})
  // group.attr('zlevel', zlevel)
  group.add(rectNode)
  group.add(circleNode)
  group.add(textNode)

  group.componentName = 'componentUser'
  group.updateWidth = function ({width = 0}) {
    rectNode.attr('shape', {width})
  }
  group.$updateColor = function () {
    // 随机改变文字颜色
    textNode.attr('style', {fill: '#' + Math.floor(Math.random() * 0xffffff).toString(16)})
    // 点击后随机改变圆形颜色
    circleNode.attr('style', {fill: '#' + Math.floor(Math.random() * 0xffffff).toString(16)})
  }
  // group.beforeUpdate = function () {
  //   // 随机改变文字颜色
  //   textNode.attr('style', {fill: '#' + Math.floor(Math.random() * 0xffffff).toString(16)})
  // }
  // group.afterUpdate = function () {
  //   // 获取文字颜色
  //   const color = textNode.style.fill
  //   console.log('textNode color', color)
  // }
  // 绑定点击事件
  group.on('click', function () {
    // 点击后随机改变圆形颜色
    circleNode.attr('style', {fill: '#' + Math.floor(Math.random() * 0xffffff).toString(16)})
  })
  return group
}

export const getRectBg = function ({width, height}) {
  return new zrender.Rect({
      shape: {
          cx: 0,
          cy: 0,
          width: width,
          height: height
      },
      style: {
          fill: '#D7F9FF'
      },
      zlevel: -1
  });
}
export const getCircle = function ({width, height, x, y, zlevel = 0}) {
  return new zrender.Circle({
      shape: {
          cx: 0,
          cy: 0,
          r: 16
      },
      style: {
          fill: '#FF904F'
      },
      position: [x, y],
      zlevel: zlevel,
  });
}
export const getRect = function ({width, height, x, y, zlevel = 0}) {
  return new zrender.Rect({
      shape: {
          r: 4,
          cx: 0,
          cy: 0,
          width: width,
          height: height
      },
      style: {
          fill: '#37B0FF'
      },
      position: [x, y],
      zlevel: zlevel,
  });
}
export const getText = function ({width, height, text = '', x, y, zlevel = 0}) {
  const $textNode = new zrender.Text({
      style: {
          text: text,
          textAlign: 'center',
          textBaseline: 'middle',
          fill: '#fff',
          fontSize: 20
      },
      position: [x, y],
      zlevel: zlevel,
  });
  // 计算文字占用宽度
  const textWidth = $textNode.getBoundingRect().width
  $textNode.attr('position', [x - textWidth / 2, y])
  $textNode.$setPosition = function (x, y) {
    $textNode.attr('position', [x - textWidth / 2, y])
  }
  return $textNode
}

export const zrenderInit = function (elNode) {
  var container = elNode;
  console.log('zrenderInit', zrender)
  var zr = zrender.init(container, {
    devicePixelRatio: 2
  });

  return zr
}